import React, { Component } from 'react';
// 导入路由组件
import { Switch, Route, Redirect } from 'react-router-dom';
// 导入要显示的组件
// import Transition1 from '../components/Transition1'
// import Transition2 from '../components/Transition2'
// import Transition3 from '../components/Transition3'
// import Index from '../components/Index'
// import NotFound from '../components/NotFound'
// import Params from '../components/Params'

// 懒加载，步骤1
const Transition1 = React.lazy(()=>import('../components/Transition1'))
const Transition2 = React.lazy(()=>import('../components/Transition2'))
const Transition3 = React.lazy(()=>import('../components/Transition3'))
const Index = React.lazy(()=>import('../components/Index'))
const NotFound = React.lazy(()=>import('../components/NotFound'))
const Params = React.lazy(()=>import('../components/Params'))
const List = React.lazy(()=>import('../components/List'))
const Detail = React.lazy(()=>import('../components/Detail'))
const Layout = React.lazy(()=>import('../components/Layout'))
const Login = React.lazy(()=>import('../components/Login'))
const Antd = React.lazy(()=>import('../components/Antd'))
const Redux1 = React.lazy(()=>import('../components/Redux1'))
const Big = React.lazy(()=>import('../components/Big'))

class Router extends Component {
  render() {
    return (
      <>
        {/* 懒加载，步骤2 */}
        <React.Suspense fallback={<mark>loading...</mark>}>
        <Switch>
          {/* 路由匹配的方式：从上到下从左到右，只要包含就匹配成功 */}
          {/* exact:严格模式，地址完全相等才会匹配成功 */}
          {/* strict:严格匹配，会检验地址最后的斜线是否加了 */}
          <Route path="/" exact component={Index}></Route>
          <Route path="/transition1" exact strict component={Transition1}></Route>
          <Route path="/transition2" component={Transition2}></Route>
          <Route path="/transition3" component={Transition3}></Route>
          <Route path="/params" component={Params}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/layout" component={Layout}></Route>
          <Route path="/antd" component={Antd}></Route>
          <Route path="/redux1" component={Redux1}></Route>
          <Route path="/big" component={Big}></Route>
          {/* <Route path="/list" component={List}></Route> */}
          <Route path="/list" render={
            ()=>{
              if(localStorage.getItem('isLogin')) {
                // 已经登陆，可以查看list
                document.title = '歌曲列表';
                return <List></List>
              }else {
                // 先登录
                return <Redirect to="/login"></Redirect>
              }
            }
          }></Route>
          <Route path="/detail/:title" component={Detail}></Route>
          {/* 404的地址放在最后 */}
          {/* 省略path属性，相当于path="*" */}
          {/* <Route component={NotFound}></Route> */}
          {/* 重定向的方式 */}
          <Route path="/404" component={NotFound}></Route>
          <Redirect path="*" to="/404"></Redirect>
        </Switch>
        </React.Suspense>
      </>
    );
  }
}

export default Router;
